<!--
 * @Author: yishen@mdashen.com
 * @Date: 2021-05-17 20:59:47
 * @LastEditTime: 2021-05-18 21:19:20
 * @Description:
-->
<template>
  <div class="container">
    <GlobalHeader :user="currentUser"></GlobalHeader>
    <ColumnList :list="list"></ColumnList>
  </div>
</template>

<script lang="ts">
// import 'bootstrap/scss/bootstrap.scss'
import { defineComponent } from 'vue'
import ColumnList, { ColumnProps } from './components/ColumnList.vue'
import GlobalHeader, { UserProps } from './components/GlobalHeader.vue'
const testData: ColumnProps[] = [
  {
    id: 1,
    title: '标题',
    description: '描述文字'
    // avatar:
    //   'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRi5hCj_TGYwRO9XNXhqqGTNTlnBXYMdc08TOlPAghEJxUUVty2XoeaaNHHNWRNJDEsINc&usqp=CAU'
  },
  {
    id: 2,
    title: '标题',
    description: '描述文字',
    avatar:
      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRi5hCj_TGYwRO9XNXhqqGTNTlnBXYMdc08TOlPAghEJxUUVty2XoeaaNHHNWRNJDEsINc&usqp=CAU'
  },
  {
    id: 3,
    title: '标题',
    description: '描述文字',
    avatar:
      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRi5hCj_TGYwRO9XNXhqqGTNTlnBXYMdc08TOlPAghEJxUUVty2XoeaaNHHNWRNJDEsINc&usqp=CAU'
  },
  {
    id: 4,
    title: '标题',
    description: '描述文字',
    avatar:
      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRi5hCj_TGYwRO9XNXhqqGTNTlnBXYMdc08TOlPAghEJxUUVty2XoeaaNHHNWRNJDEsINc&usqp=CAU'
  },
  {
    id: 5,
    title: '标题',
    description: '描述文字',
    avatar:
      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRi5hCj_TGYwRO9XNXhqqGTNTlnBXYMdc08TOlPAghEJxUUVty2XoeaaNHHNWRNJDEsINc&usqp=CAU'
  },
  {
    id: 6,
    title: '标题',
    description: '描述文字',
    avatar:
      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRi5hCj_TGYwRO9XNXhqqGTNTlnBXYMdc08TOlPAghEJxUUVty2XoeaaNHHNWRNJDEsINc&usqp=CAU'
  }
]
const currentUser: UserProps = {
  isLogin: true,
  name: 'yishen',
  id: 1
}
export default defineComponent({
  name: 'App',
  components: {
    ColumnList,
    GlobalHeader
  },
  setup () {
    return {
      list: testData,
      currentUser
    }
  }
})
</script>

<style lang="scss">
@import 'bootstrap/scss/bootstrap.scss';
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
